<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" title="账单计划" unmount-on-close width="65vw">
    <div v-if="isList">
      <a-tabs :active-key="billPlankey" default-active-key="1" @change="changeTab">
        <a-tab-pane v-for="(item, index) in billPlanData" :key="index + 1" :title="`${item.name}`" />
      </a-tabs>
      <div class="tableContent">
        <a-table
          :scroll="{ y: '100%' }"
          class="billTable"
          :columns="billTabColumns"
          :data="billTableData"
          :bordered="{ cell: true }"
          :pagination="false"
        >
          <template #receivableAmount="{ record }">
            {{ record.receivableAmount || '-' }}
          </template>
          <template #receivedAmount="{ record }">
            {{ record.receivedAmount || '-' }}
          </template>
          <template #orderRemark="{ record }">
            <a-typography-paragraph
              :ellipsis="{
                rows: 3,
                showTooltip: true,
              }"
            >
              {{ record?.orderRemark }}
            </a-typography-paragraph>
          </template>
        </a-table>
      </div>
      <a-button class="fee-btn" type="primary" @click="feeInfoFn"> 查看费用信息 </a-button>
    </div>
    <a-table
      :scroll="{ y: '100%' }"
      v-else
      class="billTable"
      :columns="billColumns"
      :data="billPlanData"
      :bordered="{ cell: true }"
      :pagination="false"
    >
      <template #payableAmount="{ record }">
        {{ record.payableAmount || '-' }}
      </template>
      <template #realAmount="{ record }">
        {{ record.realAmount || '-' }}
      </template>
      <template #remark="{ record }">
        <a-typography-paragraph
          :ellipsis="{
            rows: 3,
            showTooltip: true,
          }"
        >
          {{ record?.remark }}
        </a-typography-paragraph>
      </template>
    </a-table>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { unitVal } from '@/utils'
  import useNavigate from '@/hooks/useNavigate'
  import { ref } from 'vue'
  const visible = ref(false)
  const form = ref({})
  const { navigateTo } = useNavigate()
  const props = defineProps({
    okLoading: Boolean,
    isList: {
      type: Boolean,
      default: true,
    },
  })
  const billPlankey = ref(1)
  const changeTab = (val) => {
    billPlankey.value = val
    billTableData.value = billPlanData.value[val - 1].list
  }
  const billPlanData = ref([])
  const billPlanId = ref('')
  const billTableData = ref([])
  const billTabColumns = [
    {
      title: '期数',
      dataIndex: 'receivableNum',
    },
    {
      title: '应收款日',
      dataIndex: 'receivableTime',
      width: 180,
    },
    {
      title: '每期应收金额',
      dataIndex: 'receivableAmount',
      slotName: 'receivableAmount',
      width: 100,
    },
    {
      title: '每期实收金额',
      dataIndex: 'receivedAmount',
      slotName: 'receivedAmount',
      width: 100,
    },
    {
      title: '费用状态',
      dataIndex: 'receivableStatusName',
    },
    {
      title: '完成付款时间',
      dataIndex: 'receivedTime',
      width: 180,
    },
    {
      title: '备注',
      dataIndex: 'orderRemark',
      slotName: 'orderRemark',
    },
  ]
  const billColumns = [
    {
      title: '期数',
      dataIndex: 'payableNumName',
    },
    {
      title: '应收款日',
      dataIndex: 'payableTimeStr',
      width: 140,
    },
    {
      title: '每期应收金额',
      dataIndex: 'payableAmount',
      slotName: 'payableAmount',
      width: 100,
    },
    {
      title: '每期实收金额',
      dataIndex: 'realAmount',
      slotName: 'realAmount',
      width: 100,
    },
    {
      title: '费用状态',
      dataIndex: 'settlementStatusStr',
    },
    {
      title: '完成付款时间',
      dataIndex: 'payDate',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      slotName: 'remark',
    },
  ]
  const emit = defineEmits(['ok'])
  const orderCode = ref('')
  const open = (record) => {
    orderCode.value = record.orderCode
    console.log(record, 'record')
    visible.value = true
    billPlanId.value = record.id
    billPlanData.value = record.billData
    if (props.isList) {
      let billData = record.billData && record.billData
      billTableData.value = billData[0].list
      orderCode.value = billData[0].list[0].orderNo
    }
  }
  const okLoading = ref(false)
  const onCancel = () => {
    billPlankey.value = 1
    okLoading.value = false
    visible.value = false
  }
  const feeInfoFn = () => {
    okLoading.value = false
    visible.value = false
    navigateTo(`/long-order/detail/${billPlanId.value}?tab=2`, `${orderCode.value}-长租详情`)
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .tableContent {
    // overflow: scroll-y;
  }
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .billTable {
    margin-bottom: 50px;
  }
  .fee-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
</style>
